hook React
React
の
Functional Component
でも
State 状態
を管理可能に
React 16.8 で追加
関数コンポーネント
に
State 状態
や
React ライフサイクル
といった
React
の機能を “接続する (hook into)” ための関数
以前は
Class Component
でしか
State 状態
や
React ライフサイクル
を持てなかった
それまでの課題
stateful
なロジックの
Component コンポーネント code
間での
reusability 再利用性
がない
今までの代替
Render Props
HOC Higher Order Component
Hooksがある時
コンポーネントの階層構造を変えることなしに再利用
以前は、ロジックを追加すると階層が増えていた
システムの外に状態やロジックを保つ手段を手に入れた
ロジックのテスト
Component コンポーネント code
の
可読性 readability
がない
State 状態
などでごちゃごちゃ
Hooksがある時
関連する機能に基づいて、1 つのコンポーネントを複数の小さな関数に分割することを可能
以前
Class Component
を隠蔽して
Functional Component
が書ける
HOC Higher Order Component
ライブラリの
Recompose
利用してた
Render Props
の利用
Common Hooks
👀
useState hooks
👀
useEffect hooks
👀
useContext hooks
👀
useCallback hooks
👀
useMemo hooks
👀
useRef hooks
👀
useReducer hooks
custom hooks
参考
Getting Started – React